<section class="main" *ngIf="todos.length">
  <input id="toggleAll" class="toggle-all" type="checkbox"
    [ngModel]="activeTodoCount === 0"
    (ngModelChange)="handleToggleAllTodo($event)"
  >
  <label for="toggleAll"></label>
  <ul class="todo-list">
    <li class="todo" *ngFor="let todo of visibleTodos"
      [class.completed]="todo.completed === true"
      [class.editing]="todo === todoBeingEdited"
    >
      <app-todo 
        [todo] = todo
        [todoBeingEdited] = todoBeingEdited
        (onToggleTodo)="handleToggleTodo($event)"
        (onStartEditTodo)="handleStartEditTodo($event)"
        (onEndEditTodo)="handleEndEditTodo($event)"
        (onDestroyTodo)="handleDestroyTodo($event)"
      >
      </app-todo>
    </li>
  </ul>
</section>
